@import './common';

ul {
  margin: 0;
  padding: 0;
}

a:hover {
  text-decoration: none;

  body {
    min-width: 1226px;
  }

  .content {
    width: 1226px;
    margin: 0 auto;

    .navbar1 {
      width: 100%;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      align-items: center;
      height: 100px;

      .logo {
        margin-right: 42px;
        background-color: #FF6B00;
        width: 55px;
        height: 55px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .bar {
        height: 100px;
        width: 650px;
        z-index: 11;

        .bar-big {
          display: flex;
          display: -webkit-flex;
          justify-content: space-between;

          >a {
            .contain {
              margin: 0;
              padding: 0;
              // width: 88px;
              line-height: 100px;
              // margin-right: 20px;
              font-size: 16px;
              color: #333;
              overflow: hidden;
              text-align: center;

              &:hover {
                color: #FF6B00;
                text-decoration: none;
              }


              &:hover .item ul li p:first-of-type {
                color: #333;
              }

              .item {
                display: none;
                margin: 0 auto;
                height: 229px;
                position: absolute;
                top: 260px;
                left: 0;
                // background-color: yellow;
                width: 100%;
                border: 1px solid #E0E0E0;
                box-sizing: border-box;
                background-color: #fff;

                .wrapper {
                  padding: 35px;
                  height: 100%;
                  width: 1226px;
                  margin: 0px auto;
                  display: flex;
                  display: -webkit-flex;
                  justify-content: flex-start;
                  text-align: center;
                  box-sizing: border-box;

                  >li {
                    flex: 0 0 16.66%;
                    font-size: 12px;
                    border-right: 1px solid #E0E0E0;
                    // background-color: pink;

                    .pic {
                      width: 160px;
                      height: 110px;
                      text-align: center;
                      margin: 0 auto 16px;

                      img {
                        width: 100%;
                        height: 100%;
                      }
                    }

                    p:first-of-type {
                      width: 100%;
                      line-height: 20px;
                      color: #333;
                    }

                    p:last-of-type {
                      width: 100%;
                      line-height: 28px;
                      color: #FF6B00;
                    }

                  }

                  >li:last-child {
                    border-right: none;
                  }
                }
              }

              &:hover .item {
                display: block;
              }

            }
          }
        }
      }

      .search {
        position: relative;
        width: 279px;
        height: 48px;
        display: flex;
        justify-content: flex-start;
        z-index: 10;

        >input {
          padding: 0;
          padding-left: 8px;
          width: 223px;
          height: 46px;
          font-size: 16px;
          outline: none;
          border: 1px solid #e0e0e0;

          &:focus {
            border: 1px solid #FF6B00;
          }

          &:focus~.sear-icont {
            border: 1px solid #FF6B00;
            border-left: none;
          }

          &:focus~.item {
            display: block;
          }

        }

        .item {
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          width: 225px;
          font-size: 12px;
          color: #333;
          background-color: #fff;
          border: 1px solid #FF6B00;
          border-top: none;

          >ul {
            li {
              padding-left: 12px;
              line-height: 26px;

              &:hover {
                background-color: #f5f5f5;
              }
            }
          }
        }

        .sear-icont {
          text-align: center;
          width: 52px;
          height: 46px;
          line-height: 46px;
          border: 1px solid #e0e0e0;
          color: #333;
          border-left: none;

          >i {
            font-size: 21px;
          }

          &:hover {
            color: #fff;
            background-color: #FF6B00;
          }
        }
      }
    }

    .second-wrapper {
      position: relative;

      .sidebar {
        padding: 20px 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 234px;
        height: 460px;
        background-color: rgba(105, 101, 101, .6);
        box-sizing: border-box;
        z-index: 10;

        >ul {
          >li {
            >a {
              .box {
                padding-left: 30px;
                padding-right: 15px;
                display: flex;
                justify-content: space-between;
                height: 42px;
                line-height: 42px;
                font-size: 14px;
                color: #fff;

                >i {
                  font-size: 12px;
                }
              }
            }
          }
        }
      }

      .banner {
        width: 100%;
        height: 460px;

        .carousel {
          .item {
            img {
              width: 100%;
            }
          }

          .carousel-control {
            background-image: none;
          }
        }
      }

    }
  }